import { Form, Input, Button, Icon, Typography, Select } from 'antd';
import React from 'react';

const { Option } = Select;

class EditForm extends React.Component {
  state = {
    confirmDirty: false,
  };

  handleSubmit = (e: { preventDefault: () => void }) => {
    e.preventDefault();
    // @ts-ignore
    this.props.form.validateFieldsAndScroll((err: any, values: any) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };

  handleConfirmBlur = (e: { target: { value: any } }) => {
    const { value } = e.target;
    // eslint-disable-next-line react/no-access-state-in-setstate
    this.setState({ confirmDirty: this.state.confirmDirty || !!value });
  };

  render() {
    // @ts-ignore
    const { getFieldDecorator } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 },
      },
    };
    const tailFormItemLayout = {
      wrapperCol: {
        xs: {
          span: 24,
          offset: 0,
        },
        sm: {
          span: 16,
          offset: 4,
        },
      },
    };

    return (
      <div style={{ padding: 10, paddingLeft: 20 }}>
        <div>
          <span style={{ fontWeight: 'bold', fontSize: 18 }}>
            <Icon type="environment" theme="twoTone" /> 填写待发布的商品信息（
            <Typography.Text mark>当前分类：报关</Typography.Text>）
          </span>
        </div>
        <div style={{ padding: 10, paddingTop: 20 }}>
          <Form {...formItemLayout} onSubmit={this.handleSubmit}>
            <Form.Item label="供应商">
              {getFieldDecorator('supplier', {
                rules: [
                  {
                    required: true,
                    message: '该字段不能为空!',
                  },
                ],
              })(
                <Select>
                  <Option value={1}>汉森乐达</Option>
                </Select>,
              )}
            </Form.Item>
            <Form.Item label="属性名">
              {getFieldDecorator('port', {
                rules: [
                  {
                    required: true,
                    message: '该字段不能为空!',
                  },
                ],
              })(<Input />)}
            </Form.Item>
            <Form.Item label="属性值">
              {getFieldDecorator('cost1', {
                rules: [
                  {
                    required: true,
                    message: '该字段不能为空!',
                  },
                ],
              })(<Input />)}
            </Form.Item>
            <Form.Item label="备注">
              {getFieldDecorator('remark', {})(
                <Input.TextArea rows={4} style={{ width: '100%' }} />,
              )}
            </Form.Item>
            <Form.Item {...tailFormItemLayout}>
              <Button type="primary" htmlType="submit">
                保存
              </Button>
            </Form.Item>
          </Form>
        </div>
      </div>
    );
  }
}

const WrappedEditForm = Form.create({ name: 'register' })(EditForm);

// @ts-ignore
export default WrappedEditForm;
